<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目肺结核患者随访记录表</span>
    </div>
    <el-divider content-position="left">编号</el-divider>
    <el-form
    :model="form"
    ref="formRef"
    :rules="formRules"
    label-width="130px"
    label-position="left">
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访时间" prop="followUpDate">
            <el-date-picker
              v-model="form.followUpDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			  value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访方式">
            <el-select v-model="form.followUpMode" style="width: 100%">
              <el-option
                v-for="item in monthAge"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="治疗月序" prop="treatmentMonth">
            <el-input v-model="form.treatmentMonth">
              <template slot="prepend">第</template>
               <template slot="append">月</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="督导人员选择" prop="supervisoryStaff">
            <el-select v-model="form.supervisoryStaff" style="width: 100%">
              <el-option
                v-for="item in supervisoryStaff"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="form.supervisoryStaff == 4">
        <el-col :lg="12" :xl="12">
          <el-form-item>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="其他（督导人员选择）" prop="idCard">
            <el-input v-model="form.supervisoryStaffOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="症状及体征" prop="symptomsSigns">
            <el-select
              v-model="symptomsSignsArr"
              multiple
              style="width: 100%"
              @change="symptomsSignsChange"
            >
              <el-option
                v-for="item in symptomsSigns"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="吸烟情况" prop="smokingSituation">
            <el-input v-model="form.smokingSituation" style="width: 100%">
              <template slot="append">支/天</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="!(symptomsSignsArr.indexOf(10) == -1)">
          <el-form-item label="其他（症状及体征）" prop="symptomsSignsOther">
            <el-input v-model="form.symptomsSignsOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="饮酒情况" prop="drinkingSituation">
            <el-input v-model="form.drinkingSituation" style="width: 100%">
             <template slot="append">两/天</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">用药</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="化疗方案" prop="chemotherapyRegimen">
            <el-input v-model="form.chemotherapyRegimen"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="用法" prop="chemotherapyUsage">
            <el-select v-model="form.chemotherapyUsage" style="width: 100%">
              <el-option
                v-for="item in chemotherapyUsage"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="药品剂型" prop="drugDosage">
            <el-select v-model="form.drugDosage" style="width: 100%">
              <el-option
                v-for="item in drugDosage"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="漏服药次数" prop="missedMedication">
            <el-input v-model="form.missedMedication">
                <template slot="append">次</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="药物不良反应" prop="adverseDrug">
            <el-select v-model="form.adverseDrug" style="width: 100%">
              <el-option
                v-for="item in nothingOrYes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="并发症或合并症" prop="complications">
            <el-select v-model="form.complications" style="width: 100%">
              <el-option
                v-for="item in nothingOrYes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" v-if="form.adverseDrug == 2">
          <el-form-item label="有（药物不良反应）" prop="adverseDrugOther">
            <el-input v-model="form.adverseDrugOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="form.complications == 2">
          <el-form-item label="有（并发症或合并症）" prop="complicationsOther">
            <el-input v-model="form.complicationsOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">转诊</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊原因" prop="singleRoom">
            <el-input v-model="form.complicationsOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊机构" prop="ventilation">
            <el-input v-model="form.complicationsOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊科室" prop="singleRoom">
            <el-input v-model="form.complicationsOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="2周内随访结果" prop="ventilation">
            <el-input v-model="form.complicationsOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="处理意见
          " prop="singleRoom">
            <el-input v-model="form.complicationsOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">停止治疗</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="用法" prop="stopTreatment">
            <el-select v-model="form.stopTreatment" style="width: 100%">
              <el-option
                v-for="item in stopTreatment"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="停止治疗时间" prop="stopTreatmentDate">
            <el-date-picker
              v-model="form.stopTreatmentDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			        value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">全程管理情况</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="应访视次数" prop="shouldVisit">
            <el-input v-model="form.shouldVisit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="实际访视次数" prop="actualVisit">
            <el-input v-model="form.actualVisit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="应服药次数" prop="shouldTakeMedicine">
            <el-input v-model="form.shouldTakeMedicine"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="实际服药次数" prop="actualMedication">
             <el-input v-model="form.actualMedication"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="服药率(%)" prop="medicationRate">
            <el-input v-model="form.medicationRate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="下次随访时间" prop="nextFollowUpDate">
             <el-date-picker
              v-model="form.nextFollowUpDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			        value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生" prop="followUpDoctor">
            <el-input v-model="form.followUpDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名" prop="doctorSignature">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过20kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="评估医生" prop="evaluationDoctor">
            <el-input v-model="form.evaluationDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="评估医生签名" prop="evaluationSignature">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove3"
              :on-change="onprogress3"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed3"
              :file-list="fileList3"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过20kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="患者家属" prop="patientFamily">
            <el-input v-model="form.patientFamily"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="患者家属签名" prop="patientSignature">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过20kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片" prop="Scene pictures">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过200kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
        </el-col>
      </el-row>
			<el-row type="flex" class="submitSty">
			  <HButton type="add" @click="submit">提交</HButton>
			</el-row>
    </el-form>
  </div>
</template>

<script>
import {
  monthAge,
  patientType,
  sputumBacteria,
  drugResistance,
  symptomsSigns,
  chemotherapyUsage,
  drugDosage,
  supervisoryStaff,
  singleRoom,
  ventilation,
  educationTraining,
  nothingOrYes,
  stopTreatment
} from "@/api/followForms/tuberculosisFirst";
import { userNameValidator,IDValid,everyNumberValidator } from "@/utils/validate";
import {add} from"@/api/formData"
export default {
  data() {
    return {
      form: {},
      monthAge:monthAge,
      patientType:patientType,
      sputumBacteria:sputumBacteria,
      drugResistance:drugResistance,
      symptomsSigns:symptomsSigns,
      symptomsSignsArr: [],
      chemotherapyUsage:chemotherapyUsage,
      drugDosage:drugDosage,
      drugDosageArr:[],
      supervisoryStaff:supervisoryStaff,
      singleRoom:singleRoom,
      ventilation:ventilation,
      educationTraining:educationTraining,
      fileList:[],
      fileList1:[],
      fileList2:[],
      fileList3:[],
      nothingOrYes:nothingOrYes,
      stopTreatment:stopTreatment,
      formRules:{
          userName:userNameValidator,
          idCard:IDValid,
          treatmentMonth:everyNumberValidator,
          smokingSituation:everyNumberValidator,
          drinkingSituation:everyNumberValidator,
          missedMedication:everyNumberValidator,
          medicationRate:everyNumberValidator,
          shouldVisit:everyNumberValidator,
          actualVisit:everyNumberValidator,
          shouldTakeMedicine:everyNumberValidator,
          actualMedication:everyNumberValidator
      }
    };
  },
  created() {},
  methods: {
    //提交
    submit() {
      var json = 	JSON.stringify(this.form)
      var data = {
        "id":this.form.id,
        "type":"CQDYC",
        "otherData":json
      }
      add(data).then(res=>{
        if (res.code == 'AA000000') {
          this.$message.success('提交成功')
        }
      })
    },
    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //症状及体征
    symptomsSignsChange(value){
      this.form.symptomsSigns = this.symptomsSignsArr.toString();
      this.select(value, this.symptomsSigns);
    },
    //药品剂型
    drugDosageChange(value){
      this.form.drugDosage = this.drugDosageArr.toString();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 20;
      if (!fileSize) {
        this.$message.warning("不能超过20kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 20;
      if (!fileSize) {
        this.$message.warning("不能超过20kb！");
        this.fileList1.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 200;
      if (!fileSize) {
        this.$message.warning("不能超过200kb！");
        this.fileList2.pop();
      }
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove3(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress3(file, fileList) {
      this.fileList3 = fileList;
      const fileSize = file.size / 1024 < 20;
      if (!fileSize) {
        this.$message.warning("不能超过20kb！");
        this.fileList3.pop();
      }
    },
    onExceed3() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 20%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
